<template>
  <main-layout v-bind:headerContent="title" class="home">
    <flex-center class="row-center">
      <el-button
        id="homeFirstButton"
        type="text"
        @click="centerDialogVisible = true"
        >"点击进入即可查看高清无码大图，此图内容尺度过大请细细品味哦"</el-button
      >
    </flex-center>
    <div>
      <el-dialog
        title="你愿意做我女朋友吗"
        :visible.sync="centerDialogVisible"
        :close-on-press-escape="closeOnPressEscape"
        :close-on-click-modal="closeOnClickModal"
        :show-close="showClose"
        width="30%"
        center
      >
        <span>❤❤❤❤❤❤❤❤❤❤❤❤❤❤愿意做我女朋友吗❤❤❤❤❤❤❤❤❤❤❤❤❤❤</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="centerDialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </main-layout>
</template>

<script>
import MainLayout from "../layout/Main.vue";
import FlexCenter from "../layout/FlexCenter.vue";
export default {
  components: {
    MainLayout,
    FlexCenter,
  },
  data() {
    return {
      title: "恭喜您第二关解码成功咯",
      centerDialogVisible: false,
      closeOnPressEscape: false,
      showClose: false,
      closeOnClickModal: false,
    };
  },
  methods: {
    dialogVisible() {
      this.dialogVisible = true;
    },
  },
};
</script>

<style>
.home {
  background: #e7fae7 url("../assets/593257.jpg") repeat fixed center;
}
#homeFirstButton {
  transform: translateY(-300px);
}
.row-center {
  text-align: center;
}
.no-way:hover {
  display: none;
}
</style>
